<template>
  <div class="Mrliu">


        <vxe-form :data="formData" @submit="findList">
          <vxe-form-item span="6" title="时间" >
            <el-date-picker v-model="formData.doctorDate" type="date" placeholder="选择日期"></el-date-picker>

          </vxe-form-item>
          <vxe-form-item span="6">
            <el-select class="recordClass" v-model="formData.wareId" @change="selectWare" placeholder="请选择科室">
              <el-option v-for="item in wareList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </vxe-form-item>
          <vxe-form-item span="6">
            <el-select class="recordClass" v-model="formData.doctorId" placeholder="请先选择科室后选择医生">
              <el-option v-for="item in doctorList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </vxe-form-item >
          <vxe-form-item span="6">
            <el-select class="recordClass" v-model="formData.classId" placeholder="请选择班次">
              <el-option v-for="item in classKindList" :key="item.id" :label="item.className+`(${item.startTime}-${item.endTime})`" :value="item.id">
              </el-option>
            </el-select>
          </vxe-form-item>
          <vxe-form-item title="预约电话" span="6" >
          <el-input type="number" v-model="formData.contactWay" placeholder="请输入预约电话"></el-input>
        </vxe-form-item>
          <vxe-form-item title="患者姓名" span="6" >
            <el-input type="number" v-model="formData.personName" placeholder="请输入预约电话"></el-input>
          </vxe-form-item>
          <vxe-form-item span="6">
            <vxe-button type="submit" status="primary">查询</vxe-button>
          </vxe-form-item>
        </vxe-form>
        <vxe-table
            ref="xTable"
            border
            :loading="loading"
            height="100%"
            :data="tableData"
           >
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="personName" title="患者姓名"
                            :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>

          <vxe-table-column field="doctorDate" title="就诊日期"
                            :edit-render="{name: '$input', props: {type: 'text'}}">

            <template v-slot:edit="{ row }">
              <el-date-picker  v-model="row.doctorDate" :picker-options="pickerOptions" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>

            </template>
          </vxe-table-column>

          <vxe-table-column field="className" title="班次"
                            :edit-render="{name: '$input', props: {type: 'text'}}">
            <template v-slot:edit="{ row }">
              <vxe-select v-model="row.className"   @change="selectClassKindChange">
                <vxe-option
                    v-for="item in classKindList"
                    :key="item.id"
                    :label="item.className"
                    :value="item.className">
                </vxe-option>
              </vxe-select>
            </template>
          </vxe-table-column>
          <vxe-table-column field="wareName" title="预约科室"
                            :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="doctorName" title="预约医生"
                            :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>

          <vxe-table-column field="concatWay" title="联系方式"
                            :edit-render="{name: '$input', props: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="state" title="就诊状态"
                            :edit-render="{name: 'input', attrs: {type: 'text'}}">
            <template v-slot="{ row }">
              <span v-if="row.state===1">已就诊</span><span v-else>未就诊</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="typeCode" title="挂号类型" :visible='2<1'
                            :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column title="操作" fixed="right">

            <template v-slot="{ row }">
              <template v-if="$refs.xTable.isActiveByRow(row)">
                <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
              </template>
              <template v-else>
                <vxe-button  type="text" @click="editRowEvent(row)" class="el-icon-edit"></vxe-button>

              <!--  <vxe-button  type="text"  v-if="row.state === 0" @click.native="handleEdit(scope.$index, scope.row)" size="mini" plain>就诊</vxe-button>-->
           <!--     <vxe-button  type="text" v-else size="mini" disabled plain ></vxe-button>-->
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>

  </div>

</template>

<script>

export default {
  // 挂号预览页面
  name: 'pre-view',
  components: {

  },
  data () {
    return {
      isShowPaitentDialog: false,
      wareBean: {},
      wareList: [],
      doctorList: [],
      classKindList: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime()< Date.now()-24*60*60*1000;
        },
      },
      loading: false,
      tableData: [],
      formData: {},
      sexList: [],
      showDialog: false,
      selectDoctor: {},
      addButtonDisabled: true,
      addFormData: {}
    }
  },
  mounted () {

    this.$api.getWareList().then(res => {
      this.wareList = res

    })

    this.$api.fetchClassKindList({
      current: 1,
      size: 999
    }).then(res=>{
      this.classKindList = res.data.data.records
    })
   this.getTableData()


  },
  watch: {
    selectDoctor(value){
      if(value&&Object.keys(value).length>0){
         this.addButtonDisabled = false
      }else{
         this.addButtonDisabled = true
      }
    }
  },
  methods: {

    getTableData(param = {}) {
      this.loading = true
      this.$api.getGuahaoList(param).then(res=>{
        this.tableData = res.data.data
      }).finally(()=>{
        this.loading = false
      })
    },
    findList () {
      this.loading = true
      this.getTableData(this.formData)
    },
    selectPatientInfo (row) {
      this.patient = row
    },
    selectPatient () {
      this.isShowPaitentDialog = true
    },
    selectWare (value) {
      this.$api.getDoctorList({
        wareId: value.id,
      }).then(res => {
         this.doctorList = res.data.data
         this.selectDoctor={}
      })
    },
    selectClassKindChange(value){

    },
    selectDoctorEvent(index,path){
      console.log(index)
      this.selectDoctor = this.doctorList[index]
    },
    editRowEvent (row) {
      // this.$refs.xTable.setActiveRow(row)
      this.$emit("editRow",row)
    },
    saveRowEvent (row) {
      this.$refs.xTable.clearActived().then(() => {
        this.$XModal.alert('success')
      })
    },
    cancelRowEvent (row) {
      const xTable = this.$refs.xTable
      xTable.clearActived().then(() => {
        // 还原行数据
        xTable.revertData(row)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .Mrliu {
    height: 100%;
  }

</style>
